<template>
	<zero-custom-bar :effect="false" color="#fff" title=''
		backgroundColor="linear-gradient(180deg, #FE9B23 0%, #FEA71D 100%)" singleIcon> </zero-custom-bar>

	<view class="header" v-if="orderInfo.orderStatus==2">
		<image src="../../static/dfk.png" mode=""></image>
		<text class="title">待付款</text>
		<text class="time">您的订单未支付,超时将自动关闭</text>
	</view>
	
	<view class="header" v-if="orderInfo.orderStatus==1">
		<image src="../../static/ywc.png" mode=""></image>
		<text class="title">已完成</text>
		<text class="time">您的订单已核销</text>
	</view>
	
	<view class="content" v-if="orderInfo">
		<view class="header-title">
			<text>服务信息</text>
		</view>
		<view class="left">
			<image src="/static/order-shop.jpg" mode=""></image>
			<view class="">
				<text class="title">车搭档代驾</text>
				<!-- <text class="sub-title">小车</text> -->
			</view>
		</view>
	
	</view>
	<view class="content" v-if="orderInfo">
		<view class="header-title">
			<text>行程信息</text>
		</view>
		<view class="item-c" style="margin-top: 48rpx;" >
			<text class="unit"></text>
			<text class="value " >出发地：{{orderInfo.startPosition}}</text>
		</view>
		<text class="line"></text>
		<view class="item-c" >
			<text class="unit" style="background-color: #2B2B2B;"></text>
			<text class="value " style="color: #FE9C24;">目的地：{{orderInfo.endPosition}}</text>
		</view>
	
	</view>
	<view class="list" v-if="orderInfo">
		<view class="header-title" style="margin-bottom: 0;">
			<text>订单信息</text>
		</view>
		<view class="item">
			<text class="label">订单号</text>
			<text class="value">{{orderInfo.orderNumber}}</text>
		</view>
		<view class="item">
			<text class="label">下单时间</text>
			<text class="value">{{orderInfo.createdTime}}</text>
		</view>
		<view class="item">
			<text class="label">支付时间</text>
			<text class="value">{{orderInfo.updatedTime}}</text>
		</view>
		<view class="item">
			<text class="label">订单总价</text>
			<text class="value">￥{{orderInfo.orderAmount / 100}}</text>
		</view>
		<view class="item">
			<text class="label">优惠</text>
			<text class="value" style="color: #FF3333;">-￥0</text>
		</view>
		<view class="item">
			<text class="label">支付</text>
			<text class="value" style="color: #FF3333;">￥{{orderInfo.payAmount / 100}}</text>
		</view>
	</view>
	
	<view class="footer" v-if="orderInfo.orderStatus==1">
		<view class="footer-content">
			<button class="cancle" @click="onRefund">申请退款</button>
			
		</view>
	</view>
	<view class="footer" v-if="orderInfo.orderStatus==2">
		<view class="footer-content">
			<button class="cancle" @click="bindOrderPay">立即支付</button>
			
		</view>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		orderShow,
		getSignupWeixin,
		orderRefund
	} from '@/api'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		wxOpenid,
	
	} from '@/utils/login-sdk.js'
	const orderInfo = ref({
		orderStatus:""
	})
	let bok = true
	
	onLoad((params) => {
		
		
		getData(params.id)
	})
	
	/** 订单详情 */
	const getData = async (id) => {
		const res = await orderShow({
			id
		})
		orderInfo.value = res.result
	}
	/** 更多门店 */
	const bindAllShop = () => {
		uni.navigateTo({
			url: "/pages/allShop/allShop"
		})
	}
	/** 申请退款 */
	const onRefund = ()=>{
		uni.showModal({
			title:'提示',
			content:'是否确认退款?',
			success: async(ret) => {
				if(ret.confirm){
					const res = await orderRefund({orderId:orderInfo.value.id})
					uni.showModal({
						title:'申请成功',
						content:'1-3 个工作日退回账户?',
						success: async(ret) => {
							uni.navigateBack()
						}
					})
				}
			}
		})
	}
	/** 查看券码 */
	const bindErCode = (item) => {
		
		uni.navigateTo({
			url: "/pages/ercode/ercode?orderId=" + orderInfo.value.id + '&code=' + orderInfo.value.orderNumber
		})
	}
	/** 立即付款 */
	const bindOrderPay = async (item) => {
		if(!bok) return false
		bok = false
		const {
			openId
		} = await wxOpenid()
		const res = await getSignupWeixin({
			orderId: orderInfo.value.id,
			payAmount: orderInfo.value.payAmount,
			wxOpenId: openId
		})
		wx.requestPayment({
			timeStamp: res.result.sdk_timestamp,
			nonceStr: res.result.sdk_noncestr,
			package: res.result.sdk_package,
			signType: res.result.sdk_signtype,
			paySign: res.result.sdk_paysign,
			success(res) {
				bok = true
				getData(orderInfo.value.id)
			},
			fail(res) {
				bok = true
				uni.showToast({
					title: '支付取消',
					icon: "none"
				})
			}
		})
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B 21%, #F8F5F0 49%) no-repeat;

	}
	.header-title{
		padding-bottom: 27rpx;
		border-bottom: 2rpx solid #F2F2F2;
		margin-bottom: 30rpx;
		text{
			font-size: 30rpx;
			color: #16191B;
		}
	}
	.header {
		margin-top: 33rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 66rpx;
			height: 66rpx;
			display: block;
			margin-bottom: 18rpx;
		}

		.title {
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			display: block;
			margin-bottom: 16rpx;
		}

		.time {
			font-size: 26rpx;
			color: #FFE9D0;
		}

	}

	.box {
		width: 630rpx;
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin:43rpx auto 17rpx;
		.shop {

			display: flex;
			align-items: center;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #F2F2F2;
			margin-bottom: 30rpx;

			image {
				display: block;
				width: 54rpx;
				height: 54rpx;
				margin-right: 11rpx;
				flex-shrink: 0;
			}

			text {
				font-size: 30rpx;
				color: #16191B;
				width: 420rpx;
			}
			.distance-tag{
				font-size: 26rpx;
				color: #FE9B23;
				display: block;
				flex: 2;
				text-align: right;
			}
		}

		.more{
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 30rpx;
				color: #16191B;
			}
			image{
				width: 38rpx;
				height: 38rpx;
				display: block;
			}
		}
	}

	.content {
		width: 630rpx;
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin:30rpx auto 0;
		position: relative;
		.twc{
			position: absolute;
			width: 190rpx;
			height: 150rpx;
			right: 24rpx;
			top: 85rpx;
		}

		.left {
			display: flex;

			image {
				width: 150rpx;
				height: 150rpx;
				background: #EDEDED;
				display: block;
				margin-right: 18rpx;
			}

			view {
				.title {
					color: #16191B;
					font-size: 30rpx;
					display: block;
				}

				.sub-title {
					color: #8E8E8E;
					font-size: 26rpx;
				}
			}
		}

		.btn{
			width: 534rpx;
			height: 70rpx;
			background: #FE9B23;
			border-radius: 35rpx;
			font-size: 28rpx;
			color: #FEFFFF;
			line-height: 70rpx;
			display: block;
			margin-top: 37rpx;
		}
		.line{
			width: 2rpx;
			height: 62rpx;
			background: #FE9C24;
			margin: 12rpx 0;
			display: block;
			margin-left: 34rpx;
		}
		.item-c{
			display: flex;
			align-items: center;
			.unit{
				width: 12rpx;
				height: 12rpx;
				background: #FE9C24;
				border-radius: 50%;
				display: block;
				margin-left: 30rpx;
			}
			.value{
				font-weight: bold;
				font-size: 30rpx;
				color: #2B2B2B;
				margin-left: 20rpx;
				width: 500rpx;
			}
		}
	}
	.list{
		width: 630rpx;
		padding:40rpx 36rpx 0;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin:18rpx auto;
		
		.item{
			height:110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.label{
				font-size: 30rpx;
				color: #16191B;
			}
			.value{
				font-size: 28rpx;
				color: #A5A5A5;
			}
		}
	}
	.footer{
		width: 750rpx;
		height: 167rpx;
		
		position: relative;
		.footer-content{
			width: 750rpx;
			height: 167rpx;
			background: #FFFFFF;
			border: 1px solid #ECF4F6;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: flex-end;
			.cancle{
				width: 210rpx;
				height: 70rpx;
				border-radius: 35rpx;
				border: 2px solid #F29335;
				font-size: 28rpx;
				color: #FE9B23;
				line-height: 74rpx;
				display: block;
				margin: 0;
				margin-top: 21rpx;
				margin-right: 28rpx;
				background: #fff;
				
			}
			
		}
		
	}
	
</style>